<template>
  <div>
    <el-table ref="table" :data="list" style="width: 100%;margin-top:30px;" border="border">
      <!-- Sequence -->
      <el-table-column align="center" label="Sequence" min-width="90">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <!-- Name -->
      <el-table-column align="center" label="Name" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <!-- Content -->
      <el-table-column align="center" label="Content" min-width="110">
        <template slot-scope="scope">
          <span>{{ scope.row.content }}</span>
        </template>
      </el-table-column>
      <!-- Course -->
      <el-table-column align="center" label="Course" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.course }}
        </template>
      </el-table-column>
      <!-- Classify -->
      <el-table-column align="center" label="Classify" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.classify }}
        </template>
      </el-table-column>
      <!-- Operation -->
      <el-table-column align="center" label="Operations" fixed="right" min-width="300">
        <template slot-scope="scope">
          <el-tooltip content="Click the button will edit" placement="top">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleEdit(scope)">
              Edit
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'SetDisplay',
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  methods: {
    handleEdit({ row }) {
      this.$emit('edit', row)
    }
  }
}
</script>

<style scoped>

</style>
